<script setup lang='ts'>
interface Props {
  data: ISportOutrightsInfo
}

defineOptions({ name: 'AppSportsOutrightInfo' })
const props = defineProps<Props>()

const sportsStore = useSportsStore()

const isLayerOpen = ref(false)
const layerHeight = ref('0px')
const observerDomRef = ref()
const { height: observerHeight } = useElementSize(observerDomRef)

const icon = computed(() => sportsStore.getSportsIconBySi(props.data.si))
const timeText = computed(() => formatTimeWithDayLabel(props.data.ed))

const _data = computed(() => {
  const obj = cloneDeep(props.data) as ISportOutrightsInfo
  obj.ml = obj.ml.map((a) => {
    return {
      ...a,
      ms: a.ms.map((b) => {
        return {
          ...b,
          cartInfo: {
            wid: b.wid,
            mlid: a.mlid,
            mll: a.mll,
            pid: a.pid,
            bt: a.bt,
            ov: b.ov,
            m: 100,
            ei: obj.ei,
            si: obj.si,
            hdp: b.hdp,
            sid: b.sid,
            homeTeamName: obj.oen,
            awayTeamName: '',
            btn: a.btn,
            sn: b.sn,
          },
        }
      }),
    }
  })

  return obj
})
// 前9个投注项
const betOptionsFirst9 = computed(() => _data.value.ml[0].ms.slice(0, 9))
// 剩余投注项
const restOfBetOptions = computed(() => _data.value.ml[0].ms.slice(9))

function toggleLayer() {
  // 打开
  if (!isLayerOpen.value) {
    isLayerOpen.value = true
    setTimeout(() => {
      layerHeight.value = observerHeight.value + 'px'
    }, 0);
  }
  else {
    layerHeight.value = '0px'
  }
}
function onLayerTransitionend() {
  if (layerHeight.value === '0px') {
    isLayerOpen.value = false
  }
}
</script>

<template>
  <div class="outright-info">
    <div class="flex items-center mb-[8px]">
      <div class="flex-none w-[32px] h-[32px] p-[4px] flex items-center mr-[8px]">
        <AppImage :url="icon" is-network>
          <BaseIcon class="text-[24px]" name="uni-vector" />
        </AppImage>
      </div>
      <div class="flex flex-col">
        <div class="opacity-50 text-[14px] font-semibold mb-[8px]">{{ timeText }}</div>
        <div class="flex text-[16px] font-semibold">{{ data.oen }}</div>
      </div>
    </div>
    <div class="grid flex-1 gap-[8px] grid-cols-3">
      <AppSportsBetButton v-for="market in betOptionsFirst9" size="big" :key="market.wid + market.sn" :odds="market.ov"
        :title="market.sn" :cart-info="market.cartInfo" />
    </div>
    <!-- 更多盘口 -->
    <div v-show="isLayerOpen" class="overflow-hidden duration-[0.25s]" :style="{ height: layerHeight }"
      @transitionend="onLayerTransitionend">
      <div ref="observerDomRef" class="overflow-hidden">
        <div class="grid flex-1 gap-[8px] grid-cols-3">
          <AppSportsBetButton v-for="market in restOfBetOptions" size="big" :key="market.wid + market.sn"
            :odds="market.ov" :title="market.sn" :cart-info="market.cartInfo" />
        </div>
      </div>
    </div>
    <button v-if="restOfBetOptions.length > 0" @click="toggleLayer" class="show-more-btn">
      {{ $t('spt_show_more') }}
      <BaseIcon name="uni-triangle" class="text-[16px] duration-[0.3s]" :class="[isLayerOpen ? 'rotate-[-180deg]' : '']"
        style="--tg-base-icon-color:var(--color-text-white-0);" />
    </button>
  </div>
</template>

<style lang='scss' scoped>
.outright-info {
  gap: 8px;
  color: var(--color-text-white-0);
  border: 1px solid transparent;
  display: flex;
  opacity: 1;
  padding: 16px 8px;
  position: relative;
  background: var(--color-bg-black-3);
  box-sizing: border-box;
  line-height: 17px;
  border-color: var(--color-bg-black-3);
  border-radius: 8px;
  margin-bottom: 16px;
  flex-direction: column;
}

.show-more-btn {
  color: var(--color-text-white-0);
  width: 100%;
  border: 1px solid;
  cursor: pointer;
  display: flex;
  padding: 4px 8px;
  font-size: 11px;
  background: var(--color-bg-black-5);
  box-sizing: border-box;
  align-items: center;
  font-weight: 600;
  border-color: var(--color-bg-black-5);
  border-radius: 8px;
  letter-spacing: 2px;
  text-transform: uppercase;
  justify-content: center;
}
</style>
